<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>新增研学商品</title>
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
        <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
        <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
        <script src="/app/admin/component/layui/layui.js"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <style>
            .layui-form-label{
                width: 120px!important;
            }
            .close-button {
                position: absolute;
                top: 0;
                right: 0;
                background-color: #f00;
                color: #fff;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 50%;
                cursor: pointer;
            }
            .container {
                position: relative;
                display: inline-block;
                width: 8%;
            }
            .input-box {
                width: 100%; /* 与图片宽度一致 */
                box-sizing: border-box; /* 让输入框的宽度包括内边距和边框 */
                margin-top: 10px; /* 调整与图片的间距 */
            }
        </style>
    </head>
    <body>

        <form class="layui-form" lay-filter="formData" onsubmit="return false">
            <div class="mainBox">
                <div class="main-container mr-5">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goods_sn"  lay-verify="required" placeholder="请输入商品编号" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-btn" lay-active="goods_sn">随机生成</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品图片</label>
                            <div class="layui-input-block">
                                <img class="img-3" src=""/>
                                <input type="text" style="display:none" name="goods_icon" autocomplete="off" value="" />
                                <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="aroun" permission="app.admin.upload.image">
                                    <i class="layui-icon layui-icon-upload"></i>上传图片
                                </button>
                                <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="attachment-choose-aroun" permission="app.admin.upload.attachment">
                                    <i class="layui-icon layui-icon-align-left"></i>选择图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品标题</label>
                            <div class="layui-input-block">
                                <input type="text" style="width:60%" name="goods_title" required  lay-verify="required" placeholder="请输入商品标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品推荐理由</label>
                            <div class="layui-input-block">
                                <input type="text" style="width:60%" name="goods_recommend_reason" required  lay-verify="required" placeholder="请输入商品推荐理由" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品标签</label>
                            <div class="layui-input-block">
                                <textarea name="goods_labels" placeholder="请输入商品标签，多个点击回车键" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品滚动图</label>
                            <div class="layui-input-block">
                                <span id="goodsImageDiv"></span>
                                <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="goodsAroun" permission="app.admin.upload.image">
                                    <i class="layui-icon layui-icon-upload"></i>上传图片
                                </button>
                                <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="goods-attachment-choose-aroun" permission="app.admin.upload.attachment">
                                    <i class="layui-icon layui-icon-align-left"></i>选择图片
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品分类</label>
                            <div class="layui-input-inline">
                                <div name="goods_cate" id="goods_cate" ></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品销售数量</label>
                            <div class="layui-input-inline">
                                <input type="number" name="goods_sale_num" min="0" required  lay-verify="required" placeholder="请输入商品销售数量" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品权重</label>
                            <div class="layui-input-inline">
                                <input type="number" name="sort" min="0" required  lay-verify="required" placeholder="请输入商品权重，商品权重越大排序越靠前" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品持续周期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goods_activity_cycle"  required  lay-verify="required" placeholder="请输入商品周期" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">适应年龄段</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goods_appropriate_age"  required  lay-verify="required" placeholder="请输入适应年龄段" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否启用报名期</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" id="isEnrollPeriod" lay-filter="is_enroll_period" lay-skin="switch" autocomplete="off" lay-text="启用|不启用"/>
                                <input type="text" style="display:none" name="is_enroll_period" autocomplete="off" value="2" />
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">是否启用活动限制</label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" id="is_deadline" lay-filter="is_deadline" lay-skin="switch" autocomplete="off" lay-text="启用|不启用"/>
                                    <input type="text" style="display:none" name="is_deadline" autocomplete="off" value="2" />
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" id="goodsEndTime" style="display: none">
                            <label class="layui-form-label">活动截止时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="goods_end_time" id="goods_end_time" placeholder="请输入活动日期的截止时间" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item" id="area-picker">
                            <label class="layui-form-label">所在地区</label>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="location_province" class="province-selector" data-value="">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="location_city" class="city-selector" data-value="">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="location_area" class="county-selector" data-value="">
                                    <option value="">请选择区</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">集合地点</label>
                            <div class="layui-input-inline">
                                <div name="assembly_location_id" id="assembly_location_id" value="0" ></div>
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">商品详情</label>
                            <div class="layui-input-block">
                                <textarea name="goods_details" id="goods_details" placeholder="请输入商品详情" class="layui-textarea" autocomplete="off"></textarea>
                            </div>
                        </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">首单分账模式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_allocation_mode" lay-filter="is_allocation_mode" autocomplete="off" value="0" title="不启用" checked>
                            <input type="radio" name="is_allocation_mode" lay-filter="is_allocation_mode" autocomplete="off" value="1" title="按比例分账">
                            <input type="radio" name="is_allocation_mode" lay-filter="is_allocation_mode" autocomplete="off" value="2" title="按金额分账">
                        </div>
                    </div>

                    <div class="layui-form-item" id="allocation_rate" style="display: none">
                        <label class="layui-form-label">首单分账比例</label>
                        <div class="layui-input-inline">
                            <input type="text" name="allocation_rate" value="" class="layui-input" autocomplete="off" placeholder="请输入首单分账比例">
                        </div>
                    </div>

                    <div class="layui-form-item" id="allocation_amount" style="display: none">
                        <label class="layui-form-label">首单分账金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="allocation_amount" value="" class="layui-input" autocomplete="off" placeholder="请输入首单分账金额">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">复购分账模式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_repurchase_allocation_mode" lay-filter="is_repurchase_allocation_mode" autocomplete="off" value="0" title="不启用" checked>
                            <input type="radio" name="is_repurchase_allocation_mode" lay-filter="is_repurchase_allocation_mode" autocomplete="off" value="1" title="按比例分账">
                            <input type="radio" name="is_repurchase_allocation_mode" lay-filter="is_repurchase_allocation_mode" autocomplete="off" value="2" title="按金额分账">
                        </div>
                    </div>

                    <div class="layui-form-item" id="repurchase_allocation_rate" style="display: none">
                        <label class="layui-form-label">复购分账比例</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="repurchase_allocation_rate" value="" autocomplete="off" class="layui-input" placeholder="请输入复购分账比例">
                        </div>
                    </div>

                    <div class="layui-form-item" id="repurchase_allocation_amount" style="display: none">
                        <label class="layui-form-label">复购分账金额</label>
                        <div class="layui-input-inline">
                            <input type="text" name="repurchase_allocation_amount" value="" autocomplete="off" class="layui-input" placeholder="请输入复购分账金额">
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                        提交
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        重置
                    </button>
                </div>
            </div>
    </form>
        <script src="/app/admin/admin/js/md5.min.js"></script>
        <script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
        <script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
        <script src="/app/admin/component/pear/pear.js"></script>
        <script src="/app/admin/admin/js/permission.js"></script>

        <script>
            const SELECT_GOODS_CATE_API = "/app/admin/rl-goods-cate/select?format=tree";
            const INSERT_URL = "/app/admin/rl-goods/insert";
            const SELECT_LOCATION_API="/app/admin/rl-goods/location";
            // 活动截止时间
            layui.use(["laydate"], function() {
                layui.laydate.render({
                    elem: "#goods_end_time",
                    type: "datetime",
                });
            })

            // 集合地点
            layui.use(["form", "jquery", "xmSelect"], function() {
                let value = layui.$("#assembly_location_id").attr("value");
                let initValue = value ? value.split(",") : [];
                layui.$.ajax({
                    url: SELECT_LOCATION_API,
                    dataType: "json",
                    success: function (res) {
                        layui.xmSelect.render({
                            el: "#assembly_location_id",
                            name: "assembly_location_id",
                            initValue: initValue,
                            value: value,
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                            prop: {
                                name: 'address_details', // 自定义表示显示文本的属性名称
                                value: 'id' // 自定义表示值的属性名称
                            },
                            data: res.data,
                        })
                    }
               });

            });

            // 字段 商品分类父级ID cate_id
            layui.use(["jquery", "xmSelect"], function() {
                let value = layui.$("#goods_cate").attr("value");
                let initValue = value ? value.split(",") : [];
                layui.$.ajax({
                    url: SELECT_GOODS_CATE_API,
                    dataType: "json",
                    success: function (res) {
                        layui.xmSelect.render({
                            el: "#goods_cate",
                            name: "goods_cate",
                            filterable: true,
                            initValue: initValue,
                            value: "0",
                            model: {"icon":"hidden","label":{"type":"text"}},
                            clickClose: true,
                            radio: true,
                            tree: {show:true,strict:false,clickCheck:true,clickExpand:false,expandedKeys:initValue},
                            prop: {
                                name: 'cate_title', // 自定义表示显示文本的属性名称
                                value: 'id' // 自定义表示值的属性名称
                            },
                            data: res.data,
                        })
                    }
                });
            });

            //商品详情
            var tinymceEdit;
            layui.use(["tinymce"], function() {
                var tinymce = layui.tinymce
                tinymceEdit = tinymce.render({
                    elem: "#goods_details",
                    height: 400,
                    plugins: 'image',
                    images_upload_url: '/app/admin/upload/image',
                });
            })

            layui.use(["upload", "layer"], function() {
                let input = layui.$("#aroun").prev();
                input.prev().attr('src', input.val());
                layui.$("#attachment-choose-aroun").on("click", function() {
                    parent.layer.open({
                        type: 2,
                        title: "选择附件",
                        content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
                        area: ["95%", "90%"],
                        success: function (layero, index) {
                            parent.layui.$("#layui-layer" + index).data("callback", function (data) {
                                input.val(data.url).prev().attr("src", data.url);
                            });
                        }
                    });
                });
                layui.upload.render({
                    elem: "#aroun",
                    url: "/app/admin/upload/image",
                    acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
                    field: "__file__",
                    done: function (res) {
                        this.item.prev().val(res.data.url).prev().attr('src', res.data.url);
                    }
                });
            });

            layui.use(["upload", "layer","form"], function() {
                let input = layui.$("#goodsImageDiv");
                layui.$("#goods-attachment-choose-aroun").on("click", function() {
                    parent.layer.open({
                        type: 2,
                        title: "选择附件",
                        content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp",
                        area: ["95%", "90%"],
                        success: function (layero, index) {
                            parent.layui.$("#layui-layer" + index).data("callback", function (data) {
                                var html='<div class="container __MD5URL__">\n' +
                                    '<img class="img-3" src="__URL__"/>\n' +
                                    '<div class="close-button __MD5URL__-close-button">X</div>'+
                                    '<input type="text" style="display:none" name="goods_image[]" value="__URL__" />\n' +
                                    '<input type="text" class="input-box __MD5URL__-input-box" name="goods_image_sort[]" value="0">'+
                                    '</div>';
                                var md5Hash = md5(data.url);
                                html=html.replace(/__MD5URL__/g,md5Hash);
                                html=html.replace(/__URL__/g,data.url);
                                input.append(html);
                                layui.form.render();
                                layui.$("."+md5Hash).on("click", function(){
                                    console.log(1111,this,md5Hash)
                                });
                                layui.$("."+md5Hash+"-close-button").on("click", function(){
                                    console.log(2222,this,md5Hash)
                                });
                                layui.$("."+md5Hash+"-input-box").on("click", function(){
                                    console.log(3333,this,md5Hash)
                                });
                            });
                        }
                    });
                });
                layui.upload.render({
                    elem: "#goodsAroun",
                    url: "/app/admin/upload/image",
                    acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
                    field: "__file__",
                    done: function (res) {
                        var md5Hash = md5(res.data.url);
                        var html='<div class="container __MD5URL__">\n' +
                            '<img class="img-3 __MD5URL__-img" src="__URL__"/>\n' +
                            '<div class="close-button __MD5URL__-close-button">X</div>'+
                            '<input type="text" style="display:none" name="goods_image[__MD5URL__]" value="__URL__" />\n' +
                            '<input type="text" class="input-box __MD5URL__-input-box" name="goods_image_sort[__MD5URL__]" value="0">'+
                            '</div>'
                        html=html.replace(/__MD5URL__/g,md5Hash);
                        html=html.replace(/__URL__/g,res.data.url);
                        input.append(html);
                        layui.form.render();
                        layui.$("."+md5Hash+"-img").on("click", function(){
                            var imgHtml = '<div><img src="'+res.data.url+'" style="max-width:100%;max-height:100%;"></div>';
                            layer.open({
                                type: 1,
                                shadeClose: true,
                                area: ['auto', 'auto'],
                                content: imgHtml
                            });
                            layui.form.render();
                            return false;
                        });
                        layui.$("."+md5Hash+"-close-button").on("click", function(event){
                            layui.$("."+md5Hash).remove();
                            return false;
                        });
                        layui.$("."+md5Hash+"-input-box").on("blur", function(event){
                            // 获取所有的 input-box 元素
                            var inputBoxes = document.querySelectorAll('#goodsImageDiv .input-box');
                            // 将 inputBoxes 转换为数组，并根据其值对 container 进行重新排序
                            Array.from(inputBoxes)
                                .sort(function(a, b) {
                                    return b.value - a.value; // 根据 value 进行排序
                                })
                                .forEach(function(inputBox) {
                                    var container = inputBox.closest('.container'); // 找到父级 container 元素
                                    document.querySelector('#goodsImageDiv').appendChild(container); // 将 container 移动到 goodsImageDiv 的末尾
                                });
                            return false;
                        });
                    }
                });
            });

            layui.use(["form","jquery"], function() {
                var form = layui.form;
                layui.$("#is_deadline").attr("checked", layui.$('input[name="is_deadline"]').val() != 2);
                layui.$("#isEnrollPeriod").attr("checked", layui.$('input[name="is_enroll_period"]').val() != 2);
                form.render();
                form.on("switch(is_deadline)", function(data) {
                    var value=this.checked ? 1 : 2;
                    layui.$('input[name="is_deadline"]').val(value);
                    if (this.checked){
                        layui.$('#goodsEndTime').show();
                    }else{
                        layui.$('#goodsEndTime').hide();
                        layui.$('input[name="goods_end_time"]').val('');
                    }
                    form.render();
                });
                form.on("switch(is_enroll_period)", function(data) {
                    var value=this.checked ? 1 : 2;
                    layui.$('input[name="is_enroll_period"]').val(value);
                    form.render();
                });
            })

            layui.use('form', function(){
                var form = layui.form;
                form.on('radio(is_allocation_mode)', function(data){
                    var value = data.value; // 获取被选中的单选框的值
                    console.log(1111,value)
                    switch (parseInt(value)){
                        case 0:
                            layui.$('#allocation_rate').hide();
                            layui.$('input[name="allocation_rate"]').val('');
                            layui.$('#allocation_amount').hide();
                            layui.$('input[name="allocation_amount"]').val('');
                            break;
                        case 1:
                            layui.$('#allocation_rate').show();
                            layui.$('#allocation_amount').hide();
                            layui.$('input[name="allocation_amount"]').val('');
                            break;
                        case 2:
                            layui.$('#allocation_amount').show();
                            layui.$('#allocation_rate').hide();
                            layui.$('input[name="allocation_rate"]').val('');
                            break;
                    }
                });
            });

            layui.use('form', function(){
                var form = layui.form;
                form.on('radio(is_repurchase_allocation_mode)', function(data){
                    var value = data.value; // 获取被选中的单选框的值
                    switch (parseInt(value)){
                        case 0:
                            layui.$('#repurchase_allocation_rate').hide();
                            layui.$('input[name="repurchase_allocation_rate"]').val('');
                            layui.$('#repurchase_allocation_amount').hide();
                            layui.$('input[name="repurchase_allocation_amount"]').val('');
                            break;
                        case 1:
                            layui.$('#repurchase_allocation_rate').show();
                            layui.$('#repurchase_allocation_amount').hide();
                            layui.$('input[name="repurchase_allocation_amount"]').val('');
                            break;
                        case 2:
                            layui.$('#repurchase_allocation_amount').show();
                            layui.$('#repurchase_allocation_rate').hide();
                            layui.$('input[name="repurchase_allocation_rate"]').val('');
                            break;
                    }
                });
            });

            layui.use(['area','code'], function () {
                var area = layui.area;
                layui.code();
                area.render({
                    elem: '#area-picker',
                    change: function (res) {
                        console.log(res);
                    }
                });
            });

            layui.use(['util',"form","upload","tinymce","xmSelect","jquery",'layer','popup'], function(){
                var form = layui.form;
                var util = layui.util;

                util.event('lay-active', {
                    goods_sn: function(){
                        var min = 10000000; // 最小值为10000000（8位数的最小值）
                        var max = 99999999; // 最大值为99999999（8位数的最大值）
                        var randNum = Math.floor(Math.random() * (max - min + 1)) + min;
                        layui.$('input[name="goods_sn"]').val('sn'+randNum);
                        return false;
                    },
                });

                form.on("submit(save)", function (data) {
                    let loading = layer.load();
                    data.field.goods_details=tinymceEdit.getContent();
                    layui.$.ajax({
                        url: INSERT_URL,
                        type: "POST",
                        dateType: "json",
                        data: data.field,
                        success: function (res) {
                            layer.close(loading);
                            if (res.code) {
                                return layui.popup.failure(res.msg);
                            }
                            return layui.popup.success("操作成功", function () {
                                parent.refreshTable();
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        }
                    });
                    return false;
                });

            });
        </script>

    </body>
</html>
